<script setup>
import { computed, onMounted, ref } from 'vue';
const canvas = ref()

const content = ['你很好', '你很美', '你很帅', '你是万人迷', '你很幸运']

const num = ref(0)
const randomContent = computed(() => {
    num.value
    const randomNum = Math.floor(Math.random() * 5); // 0-4
    return content[randomNum]
})

const flag = ref(false)
onMounted(() => {
    const ctx = canvas.value.getContext('2d')
    ctx.lineWidth = 20
    ctx.fillRect(0, 0, 300, 300)
    canvas.value.addEventListener('mousedown', (e) => {
        flag.value = true
        ctx.lineTo(e.x, e.y - 115)
    })

    canvas.value.addEventListener('mousemove', (e) => {
        if (flag.value) {
            ctx.clearRect(e.x, e.y - 115, 50, 50)

        }

    })
    canvas.value.addEventListener('mouseup', (e) => {
        flag.value = false
    })
    canvas.value.addEventListener('mouseleave', (e) => {
        flag.value = false
    })
})
const chang = () => {
    const ctx = canvas.value.getContext('2d')
    ctx.fillRect(0, 0, 300, 300)
    num.value += 1
}
</script>
<template>
    <canvas style="position: relative; z-index: 999;" class="canvas" ref="canvas" width="300" height="300">

    </canvas>
    <div style="left: 125px; top: -185px; z-index: 1; "> {{ randomContent }}</div>
    <el-button @click="chang">切换</el-button>
</template>



<style scoped>
div {
    position: relative;
}
</style>
